{# This is the control shown/hidden #}
<div class="popup-form" id="{% block popup_id %}#popup-form{% endblock %}" style="display: none;">
    {% block form %}
        {# This lets us center the window #}
        <div class="popup-box" onclick="event.stopPropagation(); closePopup();">
            {# Actual displayed window #}
            <div class="popup-window" onclick="event.stopPropagation();">
                {% block title_panel %}
                    <div class="form-title">
                        {% block title_tag %}
                            <h1>{% block title %}Untitled Form{% endblock %}</h1>
                        {% endblock %}
                    </div>
                {% endblock %}
                {% block body_panel %}
                    <div class="form-body">
                        {% block body %}Be sure to override the body block.{% endblock %}
                    </div>
                {% endblock %}
                {% block buttons_panel %}
                    <div class="form-buttons">
                        <div class="form-button-container">
                            {% block buttons %}
                                {% block close_button %}
                                   <a href="javascript:closePopup('{{ block('popup_id') }}')" class="btn btn-default close-button">Close</a>
                                {% endblock %}
                            {% endblock %}
                        </div>
                    </div>
                {% endblock %}
            </div>
        </div>
    {% endblock %}
</div>

<script>
    $(".popup-window").draggable();

    function closePopup(id) {
        $('#' + id).hide(); 
    }
</script>